<template>
  <div class="content">
    <el-steps :active="step" simple finish-status="success">
      <el-step title="基础配置" />
      <el-step title="表单配置" />
      <el-step title="流程设计" />
    </el-steps>
    <div class="conf" v-loading="loading" element-loading-text="数据加载中...">
      <basicConf ref="base" :init-data="initData" v-show="step === 1"></basicConf>
      <formConf ref="fomrC" :init-data="initData.businessFieldList" v-show="step === 2"></formConf>
      <processDesign ref="process" :init-data="initData.node" v-show="step === 3"></processDesign>
    </div>
    <div class="button">
      <el-button type="primary" plain @click="step -= 1" v-show="step !== 1">上一步</el-button>
      <el-popconfirm :title="addOrEditFlag ? '请确认执行保存操作?' : '修改流程之后原在途流程无法发起流程跳转，请确认要执行修改操作?'" confirm-button-text="确认"
        cancel-button-text="取消" @confirm="submit()">
        <template #reference>
          <el-button type="primary" :disabled="loading" v-show="step === 3">{{ addOrEditFlag ? '保存' :
            '修改' }}</el-button>
        </template>
      </el-popconfirm>
      <el-button type="primary" @click="validate" v-show="step !== 3">下一步</el-button>
      <el-button @click="router.back">返回</el-button>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router'
import basicConf from './basicConf.vue';
import formConf from './formConf.vue';
import processDesign from './processDesign.vue';
import api from "@/api"
import { ElMessage } from "element-plus";

const router = useRouter()
const route = useRoute()
const step = ref(1)
const initData = ref({})
const base = ref(null)
const fomrC = ref(null)
const process = ref(null)
const addOrEditFlag = ref(true)
const loading = ref(false)


onMounted(() => {
  if (route.query.id) {
    addOrEditFlag.value = false
    init(route.query.id)
  }
})

// 初始化
const init = async (id) => {
  loading.value = true
  const res = await api.post('/workflow/definition/queryById', { id })
  if (res.data.code === 200) {
    initData.value = res.data.data
  } else {
    ElMessage.error(res.data.msg)
  }
  loading.value = false
}

// 保存
const submit = async () => {
  loading.value = true
  const params = {
    ...(base.value.form || {}),
    businessFieldList: fomrC.value.businessFieldList || [],
    node: process.value.processCom.getAfterDealData || {}
  }
  let path
  if (addOrEditFlag.value) {
    path = '/workflow/definition/add'
  } else {
    path = '/workflow/definition/edit'
  }
  const res = await api.post(path, params)
  if (res.data.code === 200) {
    ElMessage.success(res.data.msg)
    router.back()
  } else {
    ElMessage.error(res.data.msg)
  }
  loading.value = false
}
const validate = async () => {
  if (step.value === 1) {
    await base.value.validate()
    if (base.value.validateFlag) {
      step.value += 1
    }
  } else if (step.value === 2) {
    await fomrC.value.validate()
    if (fomrC.value.validateFlag) {
      step.value += 1
    }
  }
  return
}

</script>
<style scoped lang="less">
.conf {
  padding: 40px 0 40px 0;
}

.button {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>